<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  用户名：<input type="text" class="username"><span></span><br>
  密码：<input type="text" class="password"><span></span><br>
  手机号：<input type="text" class="tel"><span></span><br>
  <input type="button" class="btn" value="提交">
</body>
<script>

  const un = document.querySelector(".username");
  const pw = document.querySelector(".password");
  const tel = document.querySelector(".tel");
  const btn = document.querySelector(".btn");

  let unState = false;
  let pwState = false;
  let telState = false;
  
  un.oninput = function(){
    const str = this.value;
    const reg = /^[a-z\u2E80-\u9FFF]{3,10}$/i;
    if( reg.test( str ) ){
      this.nextElementSibling.innerText = "通过"
      unState = true;
    }else{
      this.nextElementSibling.innerText = "不通过"
      unState = false;
    }
  }

  pw.oninput = function(){
    const str = this.value;
    const reg = /^[^\u2E80-\u9FFF]{6,10}$/i;
    if( reg.test( str ) ){
      this.nextElementSibling.innerText = "通过"
      pwState = true
    }else{
      this.nextElementSibling.innerText = "不通过"
      pwState = false
    }
  }
  
  tel.oninput = function(){
    const str = this.value;
    const reg = /^1[3-9]\d{9}$/i;
    if( reg.test( str ) ){
      this.nextElementSibling.innerText = "通过"
      telState = true
    }else{
      this.nextElementSibling.innerText = "不通过"
      telState = false
    }
  }

  btn.onclick = function(){
    if( unState && pwState && telState ){
      alert("全部正确")
    }else{
      alert("有错误")
    }
  }
  

  
</script>
</html>